<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>IconFont Demo</title>
  <link rel="shortcut icon" href="https://img.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1371505" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe693;</span>
                <div class="name">复制</div>
                <div class="code-name">&amp;#xe693;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe694;</span>
                <div class="name">人员配置</div>
                <div class="code-name">&amp;#xe694;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe695;</span>
                <div class="name">事项配置</div>
                <div class="code-name">&amp;#xe695;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e3;</span>
                <div class="name">sanjiao</div>
                <div class="code-name">&amp;#xe6e3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe691;</span>
                <div class="name">文件</div>
                <div class="code-name">&amp;#xe691;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe692;</span>
                <div class="name">文件1</div>
                <div class="code-name">&amp;#xe692;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe688;</span>
                <div class="name">补正</div>
                <div class="code-name">&amp;#xe688;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe689;</span>
                <div class="name">合并节点</div>
                <div class="code-name">&amp;#xe689;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68a;</span>
                <div class="name">材料流转</div>
                <div class="code-name">&amp;#xe68a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68b;</span>
                <div class="name">事项办结</div>
                <div class="code-name">&amp;#xe68b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68c;</span>
                <div class="name">回复</div>
                <div class="code-name">&amp;#xe68c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68d;</span>
                <div class="name">事项受理</div>
                <div class="code-name">&amp;#xe68d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68e;</span>
                <div class="name">分流节点</div>
                <div class="code-name">&amp;#xe68e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68f;</span>
                <div class="name">审核</div>
                <div class="code-name">&amp;#xe68f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe690;</span>
                <div class="name">事项未办结</div>
                <div class="code-name">&amp;#xe690;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fc;</span>
                <div class="name">an_qianchu</div>
                <div class="code-name">&amp;#xe6fc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fd;</span>
                <div class="name">an_qianru</div>
                <div class="code-name">&amp;#xe6fd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f8;</span>
                <div class="name">an_gengduoshuju</div>
                <div class="code-name">&amp;#xe6f8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ef;</span>
                <div class="name">gengxinrizhi</div>
                <div class="code-name">&amp;#xe6ef;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe713;</span>
                <div class="name">顶部</div>
                <div class="code-name">&amp;#xe713;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f6;</span>
                <div class="name">duka</div>
                <div class="code-name">&amp;#xe6f6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe638;</span>
                <div class="name">时间</div>
                <div class="code-name">&amp;#xe638;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71b;</span>
                <div class="name">weixuanzhong</div>
                <div class="code-name">&amp;#xe71b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71e;</span>
                <div class="name">xuanzhong</div>
                <div class="code-name">&amp;#xe71e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe641;</span>
                <div class="name">wenjian</div>
                <div class="code-name">&amp;#xe641;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe642;</span>
                <div class="name">wenjian</div>
                <div class="code-name">&amp;#xe642;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62c;</span>
                <div class="name">c_修改受理地</div>
                <div class="code-name">&amp;#xe62c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe630;</span>
                <div class="name">c_修改行政区域</div>
                <div class="code-name">&amp;#xe630;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe632;</span>
                <div class="name">c_修改下一步经办人 (1)</div>
                <div class="code-name">&amp;#xe632;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe627;</span>
                <div class="name">zdhbd-shanchu</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe613;</span>
                <div class="name">lcsj-shuxing</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62b;</span>
                <div class="name">lcsj-shixiangshouli</div>
                <div class="code-name">&amp;#xe62b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61f;</span>
                <div class="name">lcsj--hebingjiedian</div>
                <div class="code-name">&amp;#xe61f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe622;</span>
                <div class="name">lcsj--fenliujiedian</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe628;</span>
                <div class="name">lcsj-shixiangbanjie</div>
                <div class="code-name">&amp;#xe628;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe624;</span>
                <div class="name">lcsj-shixiangweibanjie</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe626;</span>
                <div class="name">lcsj-cailiaoliuzhuan</div>
                <div class="code-name">&amp;#xe626;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62a;</span>
                <div class="name">lcsj-buzheng</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e9;</span>
                <div class="name">c_yichu</div>
                <div class="code-name">&amp;#xe6e9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fe;</span>
                <div class="name">an_queren</div>
                <div class="code-name">&amp;#xe6fe;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60d;</span>
                <div class="name">c_xiazai</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe617;</span>
                <div class="name">khd_piliangpeizhi</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63e;</span>
                <div class="name">huifu</div>
                <div class="code-name">&amp;#xe63e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65d;</span>
                <div class="name">c_启用</div>
                <div class="code-name">&amp;#xe65d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe662;</span>
                <div class="name">c_作废</div>
                <div class="code-name">&amp;#xe662;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe619;</span>
                <div class="name">zt-tishi</div>
                <div class="code-name">&amp;#xe619;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe605;</span>
                <div class="name">c_chongzhimima</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe609;</span>
                <div class="name">c_yonghuzu</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">c_shixiangquanxian</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69b;</span>
                <div class="name">c_解锁</div>
                <div class="code-name">&amp;#xe69b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60b;</span>
                <div class="name">c_liuchengfuzhi</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60c;</span>
                <div class="name">c_shixiangpeizhi</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe813;</span>
                <div class="name">警示</div>
                <div class="code-name">&amp;#xe813;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe654;</span>
                <div class="name">错误</div>
                <div class="code-name">&amp;#xe654;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62f;</span>
                <div class="name">地图</div>
                <div class="code-name">&amp;#xe62f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe604;</span>
                <div class="name">成功</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64e;</span>
                <div class="name">大数据</div>
                <div class="code-name">&amp;#xe64e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe612;</span>
                <div class="name">删 除</div>
                <div class="code-name">&amp;#xe612;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe613c;</span>
                <div class="name">箭头（双下）</div>
                <div class="code-name">&amp;#xe613c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e7;</span>
                <div class="name">c_diaodan</div>
                <div class="code-name">&amp;#xe6e7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d6;</span>
                <div class="name">a_chaxun</div>
                <div class="code-name">&amp;#xe6d6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f9;</span>
                <div class="name">an_xinzeng</div>
                <div class="code-name">&amp;#xe6f9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fb;</span>
                <div class="name">an_chongzhi</div>
                <div class="code-name">&amp;#xe6fb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ff;</span>
                <div class="name">guanbi</div>
                <div class="code-name">&amp;#xe6ff;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ec;</span>
                <div class="name">c_shenheyaodian</div>
                <div class="code-name">&amp;#xe6ec;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ed;</span>
                <div class="name">c_shouqu</div>
                <div class="code-name">&amp;#xe6ed;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ee;</span>
                <div class="name">c_renzheng</div>
                <div class="code-name">&amp;#xe6ee;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f0;</span>
                <div class="name">c_saomiao</div>
                <div class="code-name">&amp;#xe6f0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66e;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe66e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe608;</span>
                <div class="name">通知</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe603;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe607;</span>
                <div class="name">定位 位置</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe631;</span>
                <div class="name">向下</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a9;</span>
                <div class="name">biaoji</div>
                <div class="code-name">&amp;#xe6a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6eb;</span>
                <div class="name">c_buzheng</div>
                <div class="code-name">&amp;#xe6eb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63ad;</span>
                <div class="name">red</div>
                <div class="code-name">&amp;#xe63ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6af;</span>
                <div class="name">QQ</div>
                <div class="code-name">&amp;#xe6af;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b0;</span>
                <div class="name">mima</div>
                <div class="code-name">&amp;#xe6b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b1;</span>
                <div class="name">zhengwu</div>
                <div class="code-name">&amp;#xe6b1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b4;</span>
                <div class="name">weixin</div>
                <div class="code-name">&amp;#xe6b4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e6;</span>
                <div class="name">c_huifu</div>
                <div class="code-name">&amp;#xe6e6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72f;</span>
                <div class="name">审核</div>
                <div class="code-name">&amp;#xe72f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
                <div class="name">查询</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe615;</span>
                <div class="name">通知</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe625;</span>
                <div class="name">回复</div>
                <div class="code-name">&amp;#xe625;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72e;</span>
                <div class="name">展开</div>
                <div class="code-name">&amp;#xe72e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63ae;</span>
                <div class="name">收起</div>
                <div class="code-name">&amp;#xe63ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72d;</span>
                <div class="name">收起</div>
                <div class="code-name">&amp;#xe72d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe656;</span>
                <div class="name">banshizhinan</div>
                <div class="code-name">&amp;#xe656;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe679;</span>
                <div class="name">chakan</div>
                <div class="code-name">&amp;#xe679;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe705;</span>
                <div class="name">o_xiazai</div>
                <div class="code-name">&amp;#xe705;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63b;</span>
                <div class="name">流程</div>
                <div class="code-name">&amp;#xe63b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b2;</span>
                <div class="name">zhanghao</div>
                <div class="code-name">&amp;#xe6b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe602;</span>
                <div class="name">c_bianji</div>
                <div class="code-name">&amp;#xe602;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70b;</span>
                <div class="name">tuichu</div>
                <div class="code-name">&amp;#xe70b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a3;</span>
                <div class="name">red</div>
                <div class="code-name">&amp;#xe6a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a4;</span>
                <div class="name">yellow</div>
                <div class="code-name">&amp;#xe6a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a6;</span>
                <div class="name">guaqi</div>
                <div class="code-name">&amp;#xe6a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a7;</span>
                <div class="name">zhengchang</div>
                <div class="code-name">&amp;#xe6a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a5;</span>
                <div class="name">jinji</div>
                <div class="code-name">&amp;#xe6a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
                <div class="name">移除</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">返回</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont jh-icon-fuzhi"></span>
            <div class="name">
              复制
            </div>
            <div class="code-name">.jh-icon-fuzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-renyuanpeizhi"></span>
            <div class="name">
              人员配置
            </div>
            <div class="code-name">.jh-icon-renyuanpeizhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-shixiangpeizhi"></span>
            <div class="name">
              事项配置
            </div>
            <div class="code-name">.jh-icon-shixiangpeizhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-sanjiao"></span>
            <div class="name">
              sanjiao
            </div>
            <div class="code-name">.jh-icon-sanjiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-wenjian"></span>
            <div class="name">
              文件
            </div>
            <div class="code-name">.jh-icon-wenjian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-wenjian3"></span>
            <div class="name">
              文件1
            </div>
            <div class="code-name">.jh-icon-wenjian3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-buzheng"></span>
            <div class="name">
              补正
            </div>
            <div class="code-name">.jh-icon-buzheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-hebingjiedian"></span>
            <div class="name">
              合并节点
            </div>
            <div class="code-name">.jh-icon-hebingjiedian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-cailiaoliuzhuan"></span>
            <div class="name">
              材料流转
            </div>
            <div class="code-name">.jh-icon-cailiaoliuzhuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-shixiangbanjie"></span>
            <div class="name">
              事项办结
            </div>
            <div class="code-name">.jh-icon-shixiangbanjie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-huifu2"></span>
            <div class="name">
              回复
            </div>
            <div class="code-name">.jh-icon-huifu2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-shixiangshouli"></span>
            <div class="name">
              事项受理
            </div>
            <div class="code-name">.jh-icon-shixiangshouli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-fenliujiedian"></span>
            <div class="name">
              分流节点
            </div>
            <div class="code-name">.jh-icon-fenliujiedian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-shenhe1"></span>
            <div class="name">
              审核
            </div>
            <div class="code-name">.jh-icon-shenhe1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-shixiangweibanjie"></span>
            <div class="name">
              事项未办结
            </div>
            <div class="code-name">.jh-icon-shixiangweibanjie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-an_qianchu"></span>
            <div class="name">
              an_qianchu
            </div>
            <div class="code-name">.jh-icon-an_qianchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-an_qianru"></span>
            <div class="name">
              an_qianru
            </div>
            <div class="code-name">.jh-icon-an_qianru
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-an_gengduoshuju"></span>
            <div class="name">
              an_gengduoshuju
            </div>
            <div class="code-name">.jh-icon-an_gengduoshuju
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-gengxinrizhi"></span>
            <div class="name">
              gengxinrizhi
            </div>
            <div class="code-name">.jh-icon-gengxinrizhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-dingbu"></span>
            <div class="name">
              顶部
            </div>
            <div class="code-name">.jh-icon-dingbu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-duka"></span>
            <div class="name">
              duka
            </div>
            <div class="code-name">.jh-icon-duka
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-shijian"></span>
            <div class="name">
              时间
            </div>
            <div class="code-name">.jh-icon-shijian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-weixuanzhong"></span>
            <div class="name">
              weixuanzhong
            </div>
            <div class="code-name">.jh-icon-weixuanzhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-xuanzhong"></span>
            <div class="name">
              xuanzhong
            </div>
            <div class="code-name">.jh-icon-xuanzhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-wenjian1"></span>
            <div class="name">
              wenjian
            </div>
            <div class="code-name">.jh-icon-wenjian1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-wenjian2"></span>
            <div class="name">
              wenjian
            </div>
            <div class="code-name">.jh-icon-wenjian2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-c_xiugaishoulidi"></span>
            <div class="name">
              c_修改受理地
            </div>
            <div class="code-name">.jh-icon-c_xiugaishoulidi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-c_xiugaihangzhengquyu"></span>
            <div class="name">
              c_修改行政区域
            </div>
            <div class="code-name">.jh-icon-c_xiugaihangzhengquyu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-c_xiugaixiayibujingbanren"></span>
            <div class="name">
              c_修改下一步经办人 (1)
            </div>
            <div class="code-name">.jh-icon-c_xiugaixiayibujingbanren
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-zdhbd-shanchu"></span>
            <div class="name">
              zdhbd-shanchu
            </div>
            <div class="code-name">.jh-icon-zdhbd-shanchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-lcsj-shuxing"></span>
            <div class="name">
              lcsj-shuxing
            </div>
            <div class="code-name">.jh-icon-lcsj-shuxing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-lcsj-shixiangshouli"></span>
            <div class="name">
              lcsj-shixiangshouli
            </div>
            <div class="code-name">.jh-icon-lcsj-shixiangshouli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-lcsj--hebingjiedian"></span>
            <div class="name">
              lcsj--hebingjiedian
            </div>
            <div class="code-name">.jh-icon-lcsj--hebingjiedian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-lcsj--fenliujiedian"></span>
            <div class="name">
              lcsj--fenliujiedian
            </div>
            <div class="code-name">.jh-icon-lcsj--fenliujiedian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-lcsj-shixiangbanjie1"></span>
            <div class="name">
              lcsj-shixiangbanjie
            </div>
            <div class="code-name">.jh-icon-lcsj-shixiangbanjie1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-lcsj-shixiangweibanjie"></span>
            <div class="name">
              lcsj-shixiangweibanjie
            </div>
            <div class="code-name">.jh-icon-lcsj-shixiangweibanjie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-lcsj-cailiaoliuzhuan"></span>
            <div class="name">
              lcsj-cailiaoliuzhuan
            </div>
            <div class="code-name">.jh-icon-lcsj-cailiaoliuzhuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-lcsj-buzheng"></span>
            <div class="name">
              lcsj-buzheng
            </div>
            <div class="code-name">.jh-icon-lcsj-buzheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-c_yichu"></span>
            <div class="name">
              c_yichu
            </div>
            <div class="code-name">.jh-icon-c_yichu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-an_queren"></span>
            <div class="name">
              an_queren
            </div>
            <div class="code-name">.jh-icon-an_queren
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-c_xiazai"></span>
            <div class="name">
              c_xiazai
            </div>
            <div class="code-name">.jh-icon-c_xiazai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-khd_piliangpeizhi"></span>
            <div class="name">
              khd_piliangpeizhi
            </div>
            <div class="code-name">.jh-icon-khd_piliangpeizhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-huifu1"></span>
            <div class="name">
              huifu
            </div>
            <div class="code-name">.jh-icon-huifu1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-c_qiyong"></span>
            <div class="name">
              c_启用
            </div>
            <div class="code-name">.jh-icon-c_qiyong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-c_zuofei"></span>
            <div class="name">
              c_作废
            </div>
            <div class="code-name">.jh-icon-c_zuofei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-zt-tishi"></span>
            <div class="name">
              zt-tishi
            </div>
            <div class="code-name">.jh-icon-zt-tishi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-c_chongzhimima"></span>
            <div class="name">
              c_chongzhimima
            </div>
            <div class="code-name">.jh-icon-c_chongzhimima
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-c_yonghuzu"></span>
            <div class="name">
              c_yonghuzu
            </div>
            <div class="code-name">.jh-icon-c_yonghuzu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-c_shixiangquanxian"></span>
            <div class="name">
              c_shixiangquanxian
            </div>
            <div class="code-name">.jh-icon-c_shixiangquanxian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-c_jiesuo"></span>
            <div class="name">
              c_解锁
            </div>
            <div class="code-name">.jh-icon-c_jiesuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-c_liuchengfuzhi"></span>
            <div class="name">
              c_liuchengfuzhi
            </div>
            <div class="code-name">.jh-icon-c_liuchengfuzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-c_shixiangpeizhi"></span>
            <div class="name">
              c_shixiangpeizhi
            </div>
            <div class="code-name">.jh-icon-c_shixiangpeizhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-Warning"></span>
            <div class="name">
              警示
            </div>
            <div class="code-name">.jh-icon-Warning
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-cuowu"></span>
            <div class="name">
              错误
            </div>
            <div class="code-name">.jh-icon-cuowu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-ditu"></span>
            <div class="name">
              地图
            </div>
            <div class="code-name">.jh-icon-ditu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-chenggong"></span>
            <div class="name">
              成功
            </div>
            <div class="code-name">.jh-icon-chenggong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-dashuju"></span>
            <div class="name">
              大数据
            </div>
            <div class="code-name">.jh-icon-dashuju
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-shanchu"></span>
            <div class="name">
              删 除
            </div>
            <div class="code-name">.jh-icon-shanchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-jiantoushuangxia"></span>
            <div class="name">
              箭头（双下）
            </div>
            <div class="code-name">.jh-icon-jiantoushuangxia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-c_diaodan"></span>
            <div class="name">
              c_diaodan
            </div>
            <div class="code-name">.jh-icon-c_diaodan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-a_chaxun1"></span>
            <div class="name">
              a_chaxun
            </div>
            <div class="code-name">.jh-icon-a_chaxun1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-an_xinzeng"></span>
            <div class="name">
              an_xinzeng
            </div>
            <div class="code-name">.jh-icon-an_xinzeng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-an_chongzhi"></span>
            <div class="name">
              an_chongzhi
            </div>
            <div class="code-name">.jh-icon-an_chongzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-guanbi"></span>
            <div class="name">
              guanbi
            </div>
            <div class="code-name">.jh-icon-guanbi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-c_shenheyaodian"></span>
            <div class="name">
              c_shenheyaodian
            </div>
            <div class="code-name">.jh-icon-c_shenheyaodian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-c_shouqu"></span>
            <div class="name">
              c_shouqu
            </div>
            <div class="code-name">.jh-icon-c_shouqu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-c_renzheng"></span>
            <div class="name">
              c_renzheng
            </div>
            <div class="code-name">.jh-icon-c_renzheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-c_saomiao"></span>
            <div class="name">
              c_saomiao
            </div>
            <div class="code-name">.jh-icon-c_saomiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-search"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.jh-icon-search
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-tongzhi1"></span>
            <div class="name">
              通知
            </div>
            <div class="code-name">.jh-icon-tongzhi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-shouye"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.jh-icon-shouye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-dingweiweizhi"></span>
            <div class="name">
              定位 位置
            </div>
            <div class="code-name">.jh-icon-dingweiweizhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-xiangxia1"></span>
            <div class="name">
              向下
            </div>
            <div class="code-name">.jh-icon-xiangxia1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-biaoji"></span>
            <div class="name">
              biaoji
            </div>
            <div class="code-name">.jh-icon-biaoji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-c_buzheng"></span>
            <div class="name">
              c_buzheng
            </div>
            <div class="code-name">.jh-icon-c_buzheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-green-card"></span>
            <div class="name">
              red
            </div>
            <div class="code-name">.jh-icon-green-card
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-QQ"></span>
            <div class="name">
              QQ
            </div>
            <div class="code-name">.jh-icon-QQ
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-mima"></span>
            <div class="name">
              mima
            </div>
            <div class="code-name">.jh-icon-mima
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-zhengwu"></span>
            <div class="name">
              zhengwu
            </div>
            <div class="code-name">.jh-icon-zhengwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-weixin"></span>
            <div class="name">
              weixin
            </div>
            <div class="code-name">.jh-icon-weixin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-c_huifu"></span>
            <div class="name">
              c_huifu
            </div>
            <div class="code-name">.jh-icon-c_huifu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-shenhe"></span>
            <div class="name">
              审核
            </div>
            <div class="code-name">.jh-icon-shenhe
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-chaxun"></span>
            <div class="name">
              查询
            </div>
            <div class="code-name">.jh-icon-chaxun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-tongzhi"></span>
            <div class="name">
              通知
            </div>
            <div class="code-name">.jh-icon-tongzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-huifu"></span>
            <div class="name">
              回复
            </div>
            <div class="code-name">.jh-icon-huifu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-zhankai"></span>
            <div class="name">
              展开
            </div>
            <div class="code-name">.jh-icon-zhankai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-shouqi-copy"></span>
            <div class="name">
              收起
            </div>
            <div class="code-name">.jh-icon-shouqi-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-shouqi"></span>
            <div class="name">
              收起
            </div>
            <div class="code-name">.jh-icon-shouqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-banshizhinan"></span>
            <div class="name">
              banshizhinan
            </div>
            <div class="code-name">.jh-icon-banshizhinan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-chakan1"></span>
            <div class="name">
              chakan
            </div>
            <div class="code-name">.jh-icon-chakan1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-o_xiazai"></span>
            <div class="name">
              o_xiazai
            </div>
            <div class="code-name">.jh-icon-o_xiazai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-liucheng"></span>
            <div class="name">
              流程
            </div>
            <div class="code-name">.jh-icon-liucheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-zhanghao"></span>
            <div class="name">
              zhanghao
            </div>
            <div class="code-name">.jh-icon-zhanghao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-c_bianji"></span>
            <div class="name">
              c_bianji
            </div>
            <div class="code-name">.jh-icon-c_bianji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-tuichu"></span>
            <div class="name">
              tuichu
            </div>
            <div class="code-name">.jh-icon-tuichu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-red"></span>
            <div class="name">
              red
            </div>
            <div class="code-name">.jh-icon-red
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-yellow"></span>
            <div class="name">
              yellow
            </div>
            <div class="code-name">.jh-icon-yellow
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-guaqi"></span>
            <div class="name">
              guaqi
            </div>
            <div class="code-name">.jh-icon-guaqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-zhengchang"></span>
            <div class="name">
              zhengchang
            </div>
            <div class="code-name">.jh-icon-zhengchang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-jinji"></span>
            <div class="name">
              jinji
            </div>
            <div class="code-name">.jh-icon-jinji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-yichu"></span>
            <div class="name">
              移除
            </div>
            <div class="code-name">.jh-icon-yichu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont jh-icon-fanhui-"></span>
            <div class="name">
              返回
            </div>
            <div class="code-name">.jh-icon-fanhui-
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont jh-icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-fuzhi"></use>
                </svg>
                <div class="name">复制</div>
                <div class="code-name">#jh-icon-fuzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-renyuanpeizhi"></use>
                </svg>
                <div class="name">人员配置</div>
                <div class="code-name">#jh-icon-renyuanpeizhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-shixiangpeizhi"></use>
                </svg>
                <div class="name">事项配置</div>
                <div class="code-name">#jh-icon-shixiangpeizhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-sanjiao"></use>
                </svg>
                <div class="name">sanjiao</div>
                <div class="code-name">#jh-icon-sanjiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-wenjian"></use>
                </svg>
                <div class="name">文件</div>
                <div class="code-name">#jh-icon-wenjian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-wenjian3"></use>
                </svg>
                <div class="name">文件1</div>
                <div class="code-name">#jh-icon-wenjian3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-buzheng"></use>
                </svg>
                <div class="name">补正</div>
                <div class="code-name">#jh-icon-buzheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-hebingjiedian"></use>
                </svg>
                <div class="name">合并节点</div>
                <div class="code-name">#jh-icon-hebingjiedian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-cailiaoliuzhuan"></use>
                </svg>
                <div class="name">材料流转</div>
                <div class="code-name">#jh-icon-cailiaoliuzhuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-shixiangbanjie"></use>
                </svg>
                <div class="name">事项办结</div>
                <div class="code-name">#jh-icon-shixiangbanjie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-huifu2"></use>
                </svg>
                <div class="name">回复</div>
                <div class="code-name">#jh-icon-huifu2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-shixiangshouli"></use>
                </svg>
                <div class="name">事项受理</div>
                <div class="code-name">#jh-icon-shixiangshouli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-fenliujiedian"></use>
                </svg>
                <div class="name">分流节点</div>
                <div class="code-name">#jh-icon-fenliujiedian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-shenhe1"></use>
                </svg>
                <div class="name">审核</div>
                <div class="code-name">#jh-icon-shenhe1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-shixiangweibanjie"></use>
                </svg>
                <div class="name">事项未办结</div>
                <div class="code-name">#jh-icon-shixiangweibanjie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-an_qianchu"></use>
                </svg>
                <div class="name">an_qianchu</div>
                <div class="code-name">#jh-icon-an_qianchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-an_qianru"></use>
                </svg>
                <div class="name">an_qianru</div>
                <div class="code-name">#jh-icon-an_qianru</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-an_gengduoshuju"></use>
                </svg>
                <div class="name">an_gengduoshuju</div>
                <div class="code-name">#jh-icon-an_gengduoshuju</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-gengxinrizhi"></use>
                </svg>
                <div class="name">gengxinrizhi</div>
                <div class="code-name">#jh-icon-gengxinrizhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-dingbu"></use>
                </svg>
                <div class="name">顶部</div>
                <div class="code-name">#jh-icon-dingbu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-duka"></use>
                </svg>
                <div class="name">duka</div>
                <div class="code-name">#jh-icon-duka</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-shijian"></use>
                </svg>
                <div class="name">时间</div>
                <div class="code-name">#jh-icon-shijian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-weixuanzhong"></use>
                </svg>
                <div class="name">weixuanzhong</div>
                <div class="code-name">#jh-icon-weixuanzhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-xuanzhong"></use>
                </svg>
                <div class="name">xuanzhong</div>
                <div class="code-name">#jh-icon-xuanzhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-wenjian1"></use>
                </svg>
                <div class="name">wenjian</div>
                <div class="code-name">#jh-icon-wenjian1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-wenjian2"></use>
                </svg>
                <div class="name">wenjian</div>
                <div class="code-name">#jh-icon-wenjian2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-c_xiugaishoulidi"></use>
                </svg>
                <div class="name">c_修改受理地</div>
                <div class="code-name">#jh-icon-c_xiugaishoulidi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-c_xiugaihangzhengquyu"></use>
                </svg>
                <div class="name">c_修改行政区域</div>
                <div class="code-name">#jh-icon-c_xiugaihangzhengquyu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-c_xiugaixiayibujingbanren"></use>
                </svg>
                <div class="name">c_修改下一步经办人 (1)</div>
                <div class="code-name">#jh-icon-c_xiugaixiayibujingbanren</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-zdhbd-shanchu"></use>
                </svg>
                <div class="name">zdhbd-shanchu</div>
                <div class="code-name">#jh-icon-zdhbd-shanchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-lcsj-shuxing"></use>
                </svg>
                <div class="name">lcsj-shuxing</div>
                <div class="code-name">#jh-icon-lcsj-shuxing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-lcsj-shixiangshouli"></use>
                </svg>
                <div class="name">lcsj-shixiangshouli</div>
                <div class="code-name">#jh-icon-lcsj-shixiangshouli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-lcsj--hebingjiedian"></use>
                </svg>
                <div class="name">lcsj--hebingjiedian</div>
                <div class="code-name">#jh-icon-lcsj--hebingjiedian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-lcsj--fenliujiedian"></use>
                </svg>
                <div class="name">lcsj--fenliujiedian</div>
                <div class="code-name">#jh-icon-lcsj--fenliujiedian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-lcsj-shixiangbanjie1"></use>
                </svg>
                <div class="name">lcsj-shixiangbanjie</div>
                <div class="code-name">#jh-icon-lcsj-shixiangbanjie1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-lcsj-shixiangweibanjie"></use>
                </svg>
                <div class="name">lcsj-shixiangweibanjie</div>
                <div class="code-name">#jh-icon-lcsj-shixiangweibanjie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-lcsj-cailiaoliuzhuan"></use>
                </svg>
                <div class="name">lcsj-cailiaoliuzhuan</div>
                <div class="code-name">#jh-icon-lcsj-cailiaoliuzhuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-lcsj-buzheng"></use>
                </svg>
                <div class="name">lcsj-buzheng</div>
                <div class="code-name">#jh-icon-lcsj-buzheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-c_yichu"></use>
                </svg>
                <div class="name">c_yichu</div>
                <div class="code-name">#jh-icon-c_yichu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-an_queren"></use>
                </svg>
                <div class="name">an_queren</div>
                <div class="code-name">#jh-icon-an_queren</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-c_xiazai"></use>
                </svg>
                <div class="name">c_xiazai</div>
                <div class="code-name">#jh-icon-c_xiazai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-khd_piliangpeizhi"></use>
                </svg>
                <div class="name">khd_piliangpeizhi</div>
                <div class="code-name">#jh-icon-khd_piliangpeizhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-huifu1"></use>
                </svg>
                <div class="name">huifu</div>
                <div class="code-name">#jh-icon-huifu1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-c_qiyong"></use>
                </svg>
                <div class="name">c_启用</div>
                <div class="code-name">#jh-icon-c_qiyong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-c_zuofei"></use>
                </svg>
                <div class="name">c_作废</div>
                <div class="code-name">#jh-icon-c_zuofei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-zt-tishi"></use>
                </svg>
                <div class="name">zt-tishi</div>
                <div class="code-name">#jh-icon-zt-tishi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-c_chongzhimima"></use>
                </svg>
                <div class="name">c_chongzhimima</div>
                <div class="code-name">#jh-icon-c_chongzhimima</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-c_yonghuzu"></use>
                </svg>
                <div class="name">c_yonghuzu</div>
                <div class="code-name">#jh-icon-c_yonghuzu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-c_shixiangquanxian"></use>
                </svg>
                <div class="name">c_shixiangquanxian</div>
                <div class="code-name">#jh-icon-c_shixiangquanxian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-c_jiesuo"></use>
                </svg>
                <div class="name">c_解锁</div>
                <div class="code-name">#jh-icon-c_jiesuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-c_liuchengfuzhi"></use>
                </svg>
                <div class="name">c_liuchengfuzhi</div>
                <div class="code-name">#jh-icon-c_liuchengfuzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-c_shixiangpeizhi"></use>
                </svg>
                <div class="name">c_shixiangpeizhi</div>
                <div class="code-name">#jh-icon-c_shixiangpeizhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-Warning"></use>
                </svg>
                <div class="name">警示</div>
                <div class="code-name">#jh-icon-Warning</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-cuowu"></use>
                </svg>
                <div class="name">错误</div>
                <div class="code-name">#jh-icon-cuowu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-ditu"></use>
                </svg>
                <div class="name">地图</div>
                <div class="code-name">#jh-icon-ditu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-chenggong"></use>
                </svg>
                <div class="name">成功</div>
                <div class="code-name">#jh-icon-chenggong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-dashuju"></use>
                </svg>
                <div class="name">大数据</div>
                <div class="code-name">#jh-icon-dashuju</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-shanchu"></use>
                </svg>
                <div class="name">删 除</div>
                <div class="code-name">#jh-icon-shanchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-jiantoushuangxia"></use>
                </svg>
                <div class="name">箭头（双下）</div>
                <div class="code-name">#jh-icon-jiantoushuangxia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-c_diaodan"></use>
                </svg>
                <div class="name">c_diaodan</div>
                <div class="code-name">#jh-icon-c_diaodan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-a_chaxun1"></use>
                </svg>
                <div class="name">a_chaxun</div>
                <div class="code-name">#jh-icon-a_chaxun1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-an_xinzeng"></use>
                </svg>
                <div class="name">an_xinzeng</div>
                <div class="code-name">#jh-icon-an_xinzeng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-an_chongzhi"></use>
                </svg>
                <div class="name">an_chongzhi</div>
                <div class="code-name">#jh-icon-an_chongzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-guanbi"></use>
                </svg>
                <div class="name">guanbi</div>
                <div class="code-name">#jh-icon-guanbi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-c_shenheyaodian"></use>
                </svg>
                <div class="name">c_shenheyaodian</div>
                <div class="code-name">#jh-icon-c_shenheyaodian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-c_shouqu"></use>
                </svg>
                <div class="name">c_shouqu</div>
                <div class="code-name">#jh-icon-c_shouqu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-c_renzheng"></use>
                </svg>
                <div class="name">c_renzheng</div>
                <div class="code-name">#jh-icon-c_renzheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-c_saomiao"></use>
                </svg>
                <div class="name">c_saomiao</div>
                <div class="code-name">#jh-icon-c_saomiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-search"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#jh-icon-search</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-tongzhi1"></use>
                </svg>
                <div class="name">通知</div>
                <div class="code-name">#jh-icon-tongzhi1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-shouye"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#jh-icon-shouye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-dingweiweizhi"></use>
                </svg>
                <div class="name">定位 位置</div>
                <div class="code-name">#jh-icon-dingweiweizhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-xiangxia1"></use>
                </svg>
                <div class="name">向下</div>
                <div class="code-name">#jh-icon-xiangxia1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-biaoji"></use>
                </svg>
                <div class="name">biaoji</div>
                <div class="code-name">#jh-icon-biaoji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-c_buzheng"></use>
                </svg>
                <div class="name">c_buzheng</div>
                <div class="code-name">#jh-icon-c_buzheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-green-card"></use>
                </svg>
                <div class="name">red</div>
                <div class="code-name">#jh-icon-green-card</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-QQ"></use>
                </svg>
                <div class="name">QQ</div>
                <div class="code-name">#jh-icon-QQ</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-mima"></use>
                </svg>
                <div class="name">mima</div>
                <div class="code-name">#jh-icon-mima</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-zhengwu"></use>
                </svg>
                <div class="name">zhengwu</div>
                <div class="code-name">#jh-icon-zhengwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-weixin"></use>
                </svg>
                <div class="name">weixin</div>
                <div class="code-name">#jh-icon-weixin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-c_huifu"></use>
                </svg>
                <div class="name">c_huifu</div>
                <div class="code-name">#jh-icon-c_huifu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-shenhe"></use>
                </svg>
                <div class="name">审核</div>
                <div class="code-name">#jh-icon-shenhe</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-chaxun"></use>
                </svg>
                <div class="name">查询</div>
                <div class="code-name">#jh-icon-chaxun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-tongzhi"></use>
                </svg>
                <div class="name">通知</div>
                <div class="code-name">#jh-icon-tongzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-huifu"></use>
                </svg>
                <div class="name">回复</div>
                <div class="code-name">#jh-icon-huifu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-zhankai"></use>
                </svg>
                <div class="name">展开</div>
                <div class="code-name">#jh-icon-zhankai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-shouqi-copy"></use>
                </svg>
                <div class="name">收起</div>
                <div class="code-name">#jh-icon-shouqi-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-shouqi"></use>
                </svg>
                <div class="name">收起</div>
                <div class="code-name">#jh-icon-shouqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-banshizhinan"></use>
                </svg>
                <div class="name">banshizhinan</div>
                <div class="code-name">#jh-icon-banshizhinan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-chakan1"></use>
                </svg>
                <div class="name">chakan</div>
                <div class="code-name">#jh-icon-chakan1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-o_xiazai"></use>
                </svg>
                <div class="name">o_xiazai</div>
                <div class="code-name">#jh-icon-o_xiazai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-liucheng"></use>
                </svg>
                <div class="name">流程</div>
                <div class="code-name">#jh-icon-liucheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-zhanghao"></use>
                </svg>
                <div class="name">zhanghao</div>
                <div class="code-name">#jh-icon-zhanghao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-c_bianji"></use>
                </svg>
                <div class="name">c_bianji</div>
                <div class="code-name">#jh-icon-c_bianji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-tuichu"></use>
                </svg>
                <div class="name">tuichu</div>
                <div class="code-name">#jh-icon-tuichu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-red"></use>
                </svg>
                <div class="name">red</div>
                <div class="code-name">#jh-icon-red</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-yellow"></use>
                </svg>
                <div class="name">yellow</div>
                <div class="code-name">#jh-icon-yellow</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-guaqi"></use>
                </svg>
                <div class="name">guaqi</div>
                <div class="code-name">#jh-icon-guaqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-zhengchang"></use>
                </svg>
                <div class="name">zhengchang</div>
                <div class="code-name">#jh-icon-zhengchang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-jinji"></use>
                </svg>
                <div class="name">jinji</div>
                <div class="code-name">#jh-icon-jinji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-yichu"></use>
                </svg>
                <div class="name">移除</div>
                <div class="code-name">#jh-icon-yichu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#jh-icon-fanhui-"></use>
                </svg>
                <div class="name">返回</div>
                <div class="code-name">#jh-icon-fanhui-</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
